import React from 'react';
import styles from './DeleteConfirm.module.css';

interface DeleteConfirmProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  studentName: string;
}

const DeleteConfirm: React.FC<DeleteConfirmProps> = ({ isOpen, onClose, onConfirm, studentName }) => {
  if (!isOpen) return null;

  return (
    <div className={styles.modalOverlay} onClick={onClose}>
      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
        <div className={styles.modalHeader}>
          <h2 className={styles.modalTitle}>确认删除</h2>
        </div>
        <div className={styles.modalBody}>
          <p className={styles.modalMessage}>
            确定要删除学生 <strong>{studentName}</strong> 吗？此操作不可撤销。
          </p>
        </div>
        <div className={styles.modalFooter}>
          <button 
            type="button" 
            className={`${styles.button} ${styles.cancelButton}`}
            onClick={onClose}
          >
            取消
          </button>
          <button 
            type="button" 
            className={`${styles.button} ${styles.confirmButton}`}
            onClick={() => {
              onConfirm();
              onClose();
            }}
          >
            确认删除
          </button>
        </div>
      </div>
    </div>
  );
};

export default DeleteConfirm;